{% load static %}
{% load compress %}
{% load thumbnail %}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ settings.APPLICATION_NAME }}</title>
  <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />

  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
  <link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
  <link href="https://cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css" integrity="sha256-FdatTf20PQr/rWg+cAKfl6j4/IY3oohFAJ7gVC3M34E=" crossorigin="anonymous" />

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/css/tempusdominus-bootstrap-4.min.css" integrity="sha256-XPTBwC3SBoWHSmKasAk01c08M6sIA5gF5+sRxqak2Qs=" crossorigin="anonymous" />

  <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css" />
  <style>
    .card-body {
      padding:0;
      margin:0
    }
    .select2-container--default .select2-results__option[aria-disabled=true] {
      display: none;
    }
  </style>

  {% compress css %}
  <link href="{% static 'css/main.scss' %}" type="text/x-scss" rel="stylesheet">
  <link href="{% static 'css/mention.scss' %}" type="text/x-scss" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'css/bootstrap-suggest.css' %}">
  {% endcompress %}

  {% block extralinks %} {% endblock %}
</head>

<body class="main_body_bg_color">
  <div class="wrapper">
    {% block header %}
    <header>
      <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
        <div class="dropdown">

            {% if request.user.is_superuser or request.user.role == 'ADMIN' %}
            <a class="dropdown-toggle navbar-brand" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false" style="color:#44535c">
            {{ settings.APPLICATION_NAME }}
            </a>
            {% else %}
            {% if request.user.has_sales_access and request.user.has_marketing_access %}
            <a class="dropdown-toggle navbar-brand" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false" style="color:#44535c">
            {{ settings.APPLICATION_NAME }}
            </a>
            {% elif request.user.has_sales_access and not request.user.has_marketing_access %}
            <a class="navbar-brand" href="{% url 'common:dashboard' %}" role="button" id="dropdownMenuLink" data-toggle=""
            aria-haspopup="true" aria-expanded="false" style="color:#44535c">
            {{ settings.APPLICATION_NAME }}
            </a>
            {% elif not request.user.has_sales_access and request.user.has_marketing_access %}
            <a class="navbar-brand" href="{% url 'marketing:dashboard' %}" role="button" id="dropdownMenuLink" data-toggle=""
            aria-haspopup="true" aria-expanded="false" style="color:#44535c">
            {{ settings.APPLICATION_NAME }}
            </a>
            {% else %}
            {{''}}
            {% endif %}
            {% endif %}

          <div class="dropdown-menu mt-2" aria-labelledby="dropdownMenuLink">
            {% if user.is_superuser or user.role == 'ADMIN' %}
            <a class="dropdown-item" href="/">Sales</a>
            <a class="dropdown-item" href="{% url 'marketing:dashboard' %}">Marketing</a>
            {% else %}
            {% if user.has_sales_access and user.has_marketing_access %}
            <a class="dropdown-item" href="/">Sales</a>
            <a class="dropdown-item" href="{% url 'marketing:dashboard' %}">Marketing</a>
            {% elif user.has_sales_access and not user.has_marketing_access %}
            <a class="dropdown-item" href="/">Sales</a>
            {% elif not user.has_sales_access and user.has_marketing_access %}
            <a class="dropdown-item" href="{% url 'marketing:dashboard' %}">Marketing</a>
            {% else %}
            {{''}}
            {% endif %}
            {% endif %}
          </div>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fas fa-bars"></i>
        </button>
        {% if request.user.is_authenticated %}
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          {% block main_menu %}{% endblock %}

          <ul class="navbar-nav navbar-right my-2 my-lg-0">
            <li class="nav-item dropdown">
              <a href="#" class="dropdown-toggle abcd nav-link" data-toggle="dropdown" role="button"
                aria-haspopup="true" aria-expanded="false">
                {% if not request.user.profile_pic %}
                <img src="{% static 'images/user.png' %}" alt="Micro profile pic">
                {% else %}
                {% thumbnail request.user.profile_pic "25x25" as im %}
                <img src="{{ im.url }}">
                {% endthumbnail %}
                {% endif %}
                <b class="caret"></b>
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                {% if request.user.role == "ADMIN"  or request.user.is_superuser %}
                <a class="dropdown-item" href="{% url 'common:users_list' %}">Users</a>
                <a class="dropdown-item" href="{% url 'common:api_settings' %}">Settings</a>
                {% endif %}
                {% if request.user.email != "admin@micropyramid.com" %}
                <a class="dropdown-item" href="/change-password/">Change Password</a>
                {% endif %}
                <a class="dropdown-item" href="{% url 'common:profile' %}">Profile</a>
                <a class="dropdown-item" href="{% url 'common:logout' %}">Logout</a>
              </div>
            </li>
          </ul>
        </div>
        {% endif %}
      </nav>
    </header>
    {% endblock %}

    <div id="mainbody" class="main_container" style="margin-top:65px;">
      {% block breadcrumb %}
      {% endblock %}

      {% block content %}
      {% endblock %}
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

  <script defer src="https://use.fontawesome.com/releases/v5.12.1/js/all.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>

  <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>

<script src="{% static 'js/ajaxForm.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js" integrity="sha256-wfVTTtJ2oeqlexBsfa3MmUoB77wDNRPqT1Q1WA2MMn4=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js" integrity="sha256-z0oKYg6xiLq3yJGsp/LsY9XykbweQlHl42jHv2XTBz4=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js" integrity="sha256-IkytFcY/Z/rLvRE9rYyZvybaitAWr1y2jS/+eyxXky8=" crossorigin="anonymous"></script>
<script src="https://malsup.github.io/jquery.form.js"></script>

<script src="http://cdn.ckeditor.com/4.5.4/basic/ckeditor.js"></script>

<script src="{% static 'js/bootstrap-suggest.js' %}"></script>

  {% block js_block %}{% endblock js_block %}
  <script type="text/javascript">
    $(document).ready(function () {
      word = window.location.pathname.split('/')[1];
      if (word == "") {
        $("#dashboard").addClass('active');
      }
      else {
        $('#' + word).addClass('active');
      }
      marketing_word = window.location.pathname.split('/')[2];
      if (marketing_word == "") {
        $("#marketing-dashboard").addClass('active');
      }
      // console.log(marketing_word.substring(0,7) === 'contact');
      else if (marketing_word.substring(0, 7) === "contact") {
        $("#contact").css({ 'border-bottom': '3px solid #099CBE,' });
        $(".contact_class").css('border-bottom', '3px solid #099CBE');
        marketing_word = window.location.pathname.split('/')[2]
        // console.log(marketing_word)
        // console.log(marketing_word == 'contact-list')
        // console.log(marketing_word == 'contacts')
        if (marketing_word == 'contact-list') {
          $(".contact-list").css('background', '#e5e5e5');
        }
        if (marketing_word == 'contacts') {
          $(".contacts").css('background', '#e5e5e5');
        }
      }
      else {
        $('#' + marketing_word).addClass('active')
      }
    });

  </script>
</body>

</html>